<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-05 17:22:09
-->
<template>
  <div id="leftContainer1" style="height: 95%"></div>
</template>
<script>
//导入图表
import { Area } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      // 1.准备数据
      const data = [
        {
          date: "2022-01-01",
          temperture: 16,
        },
        { date: "2022-01-02", temperture: 14 },
        { date: "2022-01-03", temperture: 17 },
        { date: "2022-01-04", temperture: 20 },
        { date: "2022-01-05", temperture: 13 },
        { date: "2022-01-06", temperture: 17 },
      ];
      // 2.初始化图表实例，配置配置项
      const area = new Area("leftContainer1", {
        data,
        xField: "date",
        yField: "temperture",
        xAxis() {
          range: [0, 1];
          label: {
            style: {
              fill: "blue";
            }
          }
        },
        yAxis() {
          range: [0, 1];
          label: {
            style: {
              fill: "blue";
            }
          }
          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3]; // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段finish_time:new Data().getTime()当前时间
                strokeOpacity: 0.2; // 辅助线透明度12345612345678910111213141516171819202122232425
              }
            }
          }
        },
        tooltip: {
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.3)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontFamily: "微软雅黑",
            },
          },
        },
        areaStyle: () => {
          // 面积图区域渐变设置138,179,77
          return {
            fill: "l(90) 0:rgba(138, 179, 77, 1) 0.5:rgba(138, 179, 77, 0.7) 1:rgba(0,0,0,0)",
            cursor: "pointer",
          };
        },
        line: {
          size: 3,
          color: "#f7c122",
        },
      });
      // 3.执行绘画渲染
      area.render();
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>